<style>
html,body{
    overflow-x:hidden;
}
    .calculator {
        width: 350px;
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none; /* Firefox all */
        -ms-user-select: none; /* IE 10+ */
        -o-user-select: none;
        user-select: none;
        color: #333;
        float: left;
        margin-left:10px;
        margin-top:10px;
    }

    #navbar {
        margin-left: 1px;
        width: 100%;
    }

    .calculator tr {
        width: 350px
    }

    .calculator td {
        height: 70px;
        width: 70px;
        font-size: 20px;
        line-height: 70px;
        text-align: center;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0);
        color: #666

    }

    .calculator td:active,
    .calculator td:hover {
        color: #333;
        font-weight: bold;
        background: #fff;
    }

    /*.calculator td:hover {*/
        /*background: #eee;*/
    /*}*/

    /*.calculator td:active {*/
        /*background: #ddd;*/
    /*}*/

    .show {
        height: 90px;
        line-height: 90px;
        font-size: 32px;
        text-align: left;
        padding: 0 10px;
        border: none;

        margin: 0;
        width: 100%;
        color: #fff;
        outline: none;
    }

    .show::-webkit-input-placeholder {
        color: #c7c7c7;
        opacity: .5;
    }

    .money_container {
        display: flex;
        border-bottom: 1px solid #eee;
    }

    .money_container .text {
        width: 80px;
        height: 90px;
        line-height: 90px;
        font-size: 32px;
        color: #fff;
        text-align: center;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .paytype {
        float: left;
        border-radius: 5px;
        cursor: pointer;
        padding: 5px;
        margin-right:5px;
        border:1px solid transparent;;
    }

    .paytype.active,
    .paytype:hover {
        background:rgba(255,255,255,0.5);
        border:1px solid rgba(255,255,255,0.2)
    }

    #tip {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 16px;
        color: #fff;
    }
.container {
		min-height:800px;
		padding-top:50px; 
		padding-bottom:50px; 
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		left:-15px;top:-15px;bottom:-15px;right:-15px;
		background:#15a589;
}
.panel-class{

    overflow: hidden; padding: 0;position: relative;background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.3);
}
.panel-class table th,
.panel-class table td{
    color:#fff;
}
.pagination li a{
    color:#333;
}
.panel-class .panel-heading{
    background: transparent; color:#fff;
    border:none;
    font-size:14px;
}
.panel-class table tbody >tr:hover {
    background:rgba(255,255,255,0.2);
}
.row-container{
        text-align: center;
		width:90%;
		margin:auto;
        min-width:375px;
}
table  tr td {
	position: relative;
   white-space: nowrap;
}
</style>
<div class="container">
<div class="row-container">
    <div class="panel panel-default panel-class">
        <div class="panel-body">
            <div id="tip"></div>
            <div class="money_container">
                <div class="text">金额</div>
                <div class="show">0</div>
            </div>
            <div class="row">
                <table class="calculator col-sm-6">
                    <tr>
                        <td colspan="2" data-key="t">退格</td>
                        <td data-key="c">C</td>
                        <td data-key="÷">÷</td>
                    </tr>
                    <tr>
                        <td data-key="7">7</td>
                        <td data-key="8">8</td>
                        <td data-key="9">9</td>
                        <td data-key="×">×</td>
                    </tr>
                    <tr>
                        <td data-key="4">4</td>
                        <td data-key="5">5</td>
                        <td data-key="6">6</td>
                        <td data-key="-">-</td>
                    </tr>
                    <tr>
                        <td data-key="1">1</td>
                        <td data-key="2">2</td>
                        <td data-key="3">3</td>
                        <td data-key="+">+</td>
                    </tr>
                    <tr>
                        <td data-key="0">0</td>
                        <td data-key=".">.</td>
                        <td colspan="2" style="font-size: 40px" data-key="=">=</td>
                    </tr>
                </table>

                <div style="float:left;padding-top:10px;" class="col-sm-6">
                    <form action="" method="post" class="form-horizontal" style="padding-top: 10%">
						<input type="hidden" value="0" name="data[money]"/>
                        <div class="form-group">
                            <div class="col-sm-12">

                                <div ng-class="{'paytype':1, 'active':pagedata.post.paytype!=1}" ng-click="pagedata.post.paytype=0">
                                    <img src="../addons/jy_merch/resource/images/wechatpay.png"/>
                                </div>
                            
                                <div ng-if="pagedata.item.alipay_status" class="paytype" data-paytype="1">
                                    <img src="../addons/jy_merch/resource/images/alipay.png"/>
                                </div>
                                <div ng-class="{'paytype':1, 'active':pagedata.post.paytype==1}" ng-click="pagedata.post.paytype=1">
                                    <img src="../addons/jy_merch/resource/images/cash.png"/>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="form-group">
							<div class="col-sm-12">
                                <div class="input-group">
									<div class="radio radio-inline">
										<label style="color:#fff">
											<input type="radio" value="0" ng-model="pagedata.post.stype"/>手机号/付款码查询会员
										</label>
									</div>
									<div class="radio radio-inline">
										<label style="color:#fff">
											<input type="radio" value="1" ng-model="pagedata.post.stype"/>直接选择会员
										</label>
									</div>
                                </div>
                            </div>
						</div>
						<div ng-if="pagedata.post.stype!=1" class="form-group">
                            <div  class="col-sm-12">
                                <div class="input-group">
									<input type="tel" class="form-control" name="data[mobile]" ng-model="pagedata.post.mobile" placeholder="请输入{{pagedata.merchid>0?'商户':''}}会员手机号/付款码"/>
                                    <div class="input-group-btn">
                                        <input type="button" value="查询" class="btn" ng-click="pagedata.getmember()"/>
                                    </div>
                                </div>
                            </div>
						</div>
						<div ng-if="pagedata.post.stype==1" class="form-group">
							<div class="col-sm-12">
                                <div class="input-group">
									<input type="text" class="form-control" placeholder="请选择会员" ng-model="pagedata.post.member.mid" ng-readonly="true"/>
									<span ng-if="!pagedata.merchid || pagedata.merchid==0" class="input-group-btn">
										<button class="btn btn-gray" type="button" ng-click="modal_func(pagedata.post,'member','core/member.get_member/many/')"><i class="fa fa-external-link"></i>选择会员</button>
									</span>
									<span ng-if="pagedata.merchid>0" class="input-group-btn">
										<button class="btn btn-gray" type="button" ng-click="modal_func(pagedata.post,'member','jy_merch/get_member/many/merchid='+pagedata.merchid)"><i class="fa fa-external-link"></i>选择商户会员</button>
									</span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" ng-if="pagedata.memberloading">
                            <div class="col-sm-12">
                                <div class="form-control-static" style="color:white"><i class='fa fa-spinner fa-spin'></i> 正在查询...</div>
                            </div>
                        </div>

                        <div class="form-group" ng-if="pagedata.post.member.mobile || pagedata.post.member.mid">
                            <div class="col-sm-12">
                                <div class="input-group">
                                    <div class="input-group-addon">昵称</div>
									<div class="form-control" style="text-align:left">{{pagedata.post.member.nickname || pagedata.post.member.title}}</div>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">账户余额</div>
                                    <div class="form-control" style="text-align:left">{{pagedata.post.member.credit2}}</div>
                                    <div class="input-group-addon">抵用金额</div>
                                    <input type="number" name="data[deduction]" class="form-control" ng-change="pagedata.deduction()" ng-model="pagedata.post.deduction" value="0" step="0.01"/>
                                </div>
								<div ng-if="pagedata.post.enough_de_price>0" class="input-group">
                                    <div class="input-group-addon">满额立减</div>
                                    <div class="form-control" style="text-align:left">￥{{pagedata.post.enough_de_price}}</div>
                                </div>
								<div ng-if="pagedata.post.level_de_price>0" class="input-group">
                                    <div class="input-group-addon">会员优惠</div>
                                    <div class="form-control" style="text-align:left">￥{{pagedata.post.level_de_price}}</div>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">还需支付</div>
									<div class="form-control" style="text-align:left">￥{{pagedata.post.lastfee||0}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="qrcode" ng-if="pagedata.post.paytype!=1">
                            <div class="col-sm-12">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="data[auth_code]" ng-model="pagedata.post.auth_code" ng-change="pagedata.changepay()" value="" data-rule-required="true" placeholder="请扫描或输入微信付款码"/>
                                    <div class="input-group-btn">
                                        <input type="button" value="提交" class="btn" ng-click="pagedata.gopay()"/>
                                    </div>
                                </div>
                            </div>
                        </div>
						<div class="form-group" id="submit" ng-if="pagedata.post.paytype==1">
							<div class="col-sm-12">
								<input type="button" value="提交" class="btn btn-block" ng-click="pagedata.gopay()"/>
							</div>
						</div>
                        <div class="form-group" id="ordre-status" ng-if="pagedata.payloading">
                            <div class="col-sm-12">
                                 <div class="form-control-static" style="color:white"><i class='fa fa-spinner fa-spin'></i> 正在刷新支付状态...</div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<script>
    var price = 0.0;
    var change = 0;
    var operator = null;

    //计算对象
    var operateExp = {
        '+': function (num1, num2) {
            return num1 + num2;
        },
        '-': function (num1, num2) {
            return num1 - num2;
        },
        '*': function (num1, num2) {
            return num1 * num2;
        },
        '/': function (num1, num2) {
            return num2 === 0 ? 0 : num1 / num2;
        }
    }
    //计算函数
    var operateNum = function (num1, num2, op) {
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        if (!op)return num1;
        if (!operateExp[op])return 0;
        return operateExp[op](num1, num2);
    }
    $(function () {
        //计算器部分
        $(".calculator").on("click", 'td', function (e) {
            var $this = $(this);
            var $show = $(".show");
            var $tip = $("#tip");
            var showPrice = parseFloat($show.html());
            var text = $this.text();
            var money = $(":input[name='data[money]']");
            switch (text) {
                case '退格':
                    if ($show.html() == '0') {
                        break;
                    }
                    if (parseFloat($show.html()) < 10 || change == 1) {
                        $show.html(0);
                        money.val(0);
                        price = 0.0;
                        change = 1;
                        break;
                    }
                    $show.html($show.html().substr(0, $show.html().length - 1));
                    money.val($show.html());
                    break;
                case 'C':
                    $show.html(0);
                    money.val(0);
                    price = 0.0;
                    change = 1;
                    break;
                case '+':
                    if (price != 0.0 && operator == '+' && change == 0) {
                        price = operateNum(price, showPrice, operator);
                        $show.html(price);
                    } else {
                        price = showPrice;
                    }

                    change = operator = '+';
                    $tip.html($show.html() + operator);
                    break;
                case '-':
                    if (price != 0.0 && operator == '-' && change == 0) {
                        price = operateNum(price, showPrice, operator);
                        $show.html(price);
                    } else {
                        price = showPrice;
                    }
                    change = operator = '-';
                    $tip.html($show.html() + operator);
                    break;
                case '×':
                    if (price != 0.0 && operator == '*' && change == 0) {
                        price = operateNum(price, showPrice, operator);
                        $show.html(price);
                    } else {
                        price = showPrice;
                    }
                    change = operator = '*';
                    $tip.html($show.html() + 'x');
                    break;
                case '÷':
                    if (price != 0.0 && operator == '/' && change == 0) {
                        price = operateNum(price, showPrice, operator);
                        $show.html(price);
                    } else {
                        price = showPrice;
                    }
                    change = operator = '/';
                    $tip.html($show.html() + '÷');

                    break;
                case '=':
                    if (operator === null) {
                        price = showPrice;
                    } else {
                        price = operateNum(price, showPrice, operator);
                    }
                    change = 1;
                    operator = null;
                    price = price.toFixed(2);
                    $show.html(price);
                    money.val(price);
                    $tip.html('');
                    break;
                default:

                    if (text == '.' && $show.html().indexOf('.') != -1 && change == 0) {
                        break;
                    }
                    if (change != 0 || $show.html() == '0') {
                        if (text == '.') {
                            $show.html('0' + text);
                        } else {
                            $show.html(text);
                        }
                        change = 0;
                    } else {
                        if ($show.html() == '0') {
                            $show.html('');
                        }
                        $show.html($show.html() + text);
                    }
                    money.val(parseFloat($show.html()).toFixed(2));
                    if ($tip.html() != '') {
                        $tip.html($tip.html() + text);
                    }
                    break;
            }
			
			scope.pagedata.post.money=$(":input[name='data[money]']").val();
			console.log(scope.pagedata.post.money);
			scope.pagedata.upfee();
        });
        $(window).off('keydown').keydown(function (k) {
            var $attr = $(k.target);
            if ($attr.attr('name') == "find" || $attr.attr('name') == "data[auth_code]" || $attr.attr('name') == "data[deduction]" || $attr.attr('name') == "data[mobile]" || $attr.attr('name') == "confirm") {
                //如果是手机号,则模拟点击
                if ($attr.attr('name') == "data[mobile]" && k.keyCode == '13'){
                    k.preventDefault();
                    $("#check_member").trigger('click');
                }
                return;
            }
            if (k.keyCode == '48' || k.keyCode == '96') {
                $('.calculator td[data-key=0]').trigger('click');
            }
            else if (k.keyCode == '49' || k.keyCode == '97') {
                $('.calculator td[data-key=1]').trigger('click');
            }
            else if (k.keyCode == '50' || k.keyCode == '98') {
                $('.calculator td[data-key=2]').trigger('click');
            }
            else if (k.keyCode == '51' || k.keyCode == '99') {
                $('.calculator td[data-key=3]').trigger('click');
            }
            else if (k.keyCode == '52' || k.keyCode == '100') {
                $('.calculator td[data-key=4]').trigger('click');
            }
            else if (k.keyCode == '53' || k.keyCode == '101') {
                $('.calculator td[data-key=5]').trigger('click');
            }
            else if (k.keyCode == '54' || k.keyCode == '102') {
                $('.calculator td[data-key=6]').trigger('click');
            }
            else if (k.keyCode == '55' || k.keyCode == '103') {
                $('.calculator td[data-key=7]').trigger('click');
            }
            else if (k.keyCode == '56' || k.keyCode == '104') {
                $('.calculator td[data-key=8]').trigger('click');
            }
            else if (k.keyCode == '57' || k.keyCode == '105') {
                $('.calculator td[data-key=9]').trigger('click');
            }
            else if (k.keyCode == '106') {
                $('.calculator td[data-key=×]').trigger('click');
            }
            else if (k.keyCode == '107') {
                $(".calculator td[data-key=\\+]").trigger('click');
            }
            else if (k.keyCode == '189' || k.keyCode == '109') {
                $('.calculator td[data-key=\\-]').trigger('click');
            }
            else if (k.keyCode == '190' || k.keyCode == '110') {
                $('.calculator td[data-key=\\.]').trigger('click');
            }
            else if (k.keyCode == '191' || k.keyCode == '111') {
                $('.calculator td[data-key=÷]').trigger('click');
            }
            else if (k.keyCode == '187' || k.keyCode == '13') {
                $('.calculator td[data-key=\\=]').trigger('click');
                $(':input[name="data[auth_code]"]').focus();
                k.preventDefault();
            }
            else if (k.keyCode == '8') {
                $('.calculator td[data-key=t]').trigger('click');
                k.preventDefault();
            }
            else if (k.keyCode == '46') {
                $('.calculator td[data-key=c]').trigger('click');
            }
        });
    });
	scope.pagedata.deduction=function(){
		//console.log(scope.pagedata.post.deduction);
		var deduction=parseFloat(scope.pagedata.post.deduction)
		if(deduction>scope.pagedata.post.member.credit2){
			scope.message('抵扣余额不能大于现有余额！','error');
			scope.pagedata.post.deduction=scope.pagedata.post.member.credit2
			scope.$evalAsync();
			return false;
		}
		var money = $(":input[name='data[money]']").val();
		scope.pagedata.post.money=parseFloat(money)
		scope.pagedata.upfee();
	}
	scope.pagedata.getmember=function(){
		if(!scope.pagedata.post.mobile){
			scope.message('请输入手机号！','error');
			return false;
		}
		scope.pagedata.memberloading=true
		scope.get('core/member.get_data/getone/mobile='+scope.pagedata.post.mobile+'&merchid='+scope.pagedata.merchid,function(res){
			scope.pagedata.memberloading=false
			if(!res.member || !res.member.mobile){
				scope.message('没找到该会员！','error');
				return false;
			}
			scope.pagedata.post.member=res.member
			scope.$evalAsync();
		});
	}
	scope.pagedata.changepay=function(){
		if(!scope.pagedata.ischangepay && scope.pagedata.post.auth_code){
			scope.pagedata.ischangepay=true
			setTimeout(function(){
				scope.pagedata.gopay();
			},500)
		}
	}
	scope.pagedata.gopay=function(){
		scope.pagedata.ischangepay=false
		if(!scope.pagedata.post.money){
			scope.message('请输入支付金额！','error');
			return false;
		}
		scope.pagedata.memberloading=true
		scope.post_json('jy_merch/manage.cyindex/post/',scope.pagedata.post,function(res){
			scope.pagedata.memberloading=false
			scope.message(res);
		});
	}
	scope.pagedata.upfee=function(){
		scope.get('jy_merch/manage.cyindex/upfee/money='+scope.pagedata.post.money+'&mid='+scope.pagedata.post.mid,function(res){
			scope.pagedata.post.enough_de_price=res.enough_de_price
			scope.pagedata.post.level_de_price=res.level_de_price
			scope.pagedata.post.lastfee=res.lastfee
			console.log('scope.pagedata.post');console.log(scope.pagedata.post);
			scope.$evalAsync();
		});
	}
</script>